<template>
  <div class="brokerage">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row class="card mb20">
      <el-col :xl="5" :lg="8" :xs="18" :md="12" :sm="14">
        <el-card>
          <b class="total"></b>
          <div class="ml-10">
            <p class="fz14">佣金合计</p>
            <h1>{{ nav.month_total }}元</h1>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-form :model="searchForm" inline size="small">
      <el-form-item label="代理商名称">
        <el-select v-model="searchForm.agent_name" filterable clearable placeholder="全部" name="agent_name">
          <el-option v-for="(item,index) in name" :value="item.agent_num" :label="item.agent_name" :key="index">{{ item.agent_name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间段">
        <el-button type="danger" size="mini" @click="yesterTimeVal">昨天</el-button>
        <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" v-model="searchForm.time" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="success" icon="el-icon-search" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <p class="tip">当前平台为日结算，今日产生的佣金结算后次日0点才能查询，佣金自动转到余额。</p>
      <el-table :data="data" size="small" :header-cell-style="{background:'#f2f2f2'}" class="mt20" empty-text="请先选择您要查询的代理商或时间段">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column align="center" v-for="item in items" :key="item.key" :label="item.label" :prop="item.key"></el-table-column>
        <el-table-column align="center" label="佣金详情">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleGoToCommis(scope.row.agent_num, scope.row.day, scope.row.agent_name)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="流水详情">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickRecordItem(scope.row.agent_name, scope.row.day, scope.row.agent_num, scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
    <el-row>
      <el-dialog title="流水详情" :visible.sync="dialog" width="800px">
        <p class="tip">日期：{{ dialog_title.day }}  代理商：{{ dialog_title.agent_name }}</p>
        <p class="err">应得金额=交易金额 * （结算价差+返佣比例）</p>
        <p class="err">应得金额小于等于封顶金额差</p>
        <p class="err">结算价差=商户结算价-代理商结算价</p>
        <el-table :data="dialog_data" size="small" class="mt-10" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column v-for="col in model_columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center">
          </el-table-column>
        </el-table>
        <el-row class="clearfixer pb-10">
          <el-pagination :total="dialog_page.total" layout="total, prev, pager, next, jumper"  class="fr mt20" :current-page.sync="dialog_page.current" :page-size="dialog_page.size" @current-change="handleDialogCurrentChange"></el-pagination>
        </el-row>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { init, search, dialog, page, dialogPage } from '@/api/commission'

export default {
  name: 'brokerage',
  components: {
    Breadcrumb
  },
  data() {
    return {
      searchForm: {
        agent_name: '',
        time: null
      },
      nav: {
        month_total: 0
      },
      dialog: false,
      commission: true,
      data: [],
      items: [
        { label: '时间', key: 'day' },
        { label: '代理商名称', key: 'agent_name' },
        { label: '佣金合计', key: 'total' }
      ],
      dialog_data: [],
      dialog_title: {
        agent_name: '',
        agent_num: '',
        day: ''
      },
      dialog_page: {
        size: 0,
        current: 1,
        total: 0
      },
      model_columns: [
        { id: 'order_number', label: '订单号' },
        { id: 'order_money', label: '交易金额' },
        { id: 'rake_back_rate', label: '返佣比例' },
        { id: 'rate', label: '结算价差' },
        { id: 'ceiling_money', label: '封顶金额差' },
        { id: 'money', label: '应得佣金' },
        { id: 'pay_at', label: '交易时间' },
        { id: 'c_channel', label: '支付方式' },
        { id: 'b_channel', label: '支付通道' }
      ],
      name: [],
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 1
      }
    }
  },
  methods: {
    handleClickRecordItem(name, day, agent_num, id) {
      // 请求数据
      this.dialog_title.agent_name = name
      this.dialog_title.agent_num = agent_num
      this.dialog_title.id = id
      this.dialog_title.day = day
      dialog(agent_num, id).then(response => {
        this.dialog_data = response.data.result.recordLists.data
        this.dialog_page.size = response.data.result.recordLists.per_page
        this.dialog_page.current = response.data.result.recordLists.current_page
        this.dialog_page.total = response.data.result.recordLists.total
        this.dialog = true
      })
    },
    handleCurrentChange(v) {
      page(v, this.searchForm).then(response => {
        this.data = response.data.result.commission.data
        this.page.total = response.data.result.commission.total
        this.page.currentPage = response.data.result.commission.current_page
      })
    },
    handleDialogCurrentChange(v) {
      dialogPage(v, this.dialog_title).then(response => {
        this.dialog_data = response.data.result.recordLists.data
        this.dialog_page.size = response.data.result.recordLists.per_page
        this.dialog_page.current = response.data.result.recordLists.current_page
        this.dialog_page.total = response.data.result.recordLists.total
      })
    },
    search() {
      search(this.id, this.searchForm).then(response => {
        this.data = response.data.result.commission.data
        this.nav.month_total = response.data.result.month_total
        this.page.total = response.data.result.commission.total
        this.page.currentPage = response.data.result.commission.current_page
      })
    },
    yesterTimeVal() {
      const end = new Date()
      this.searchForm.starTime = new Date(end.getTime() - 24 * 60 * 60 * 1000)
      // 昨日时间
      const time = new Date(end.getTime() - 24 * 60 * 60 * 1000).toLocaleDateString()
      this.searchForm.time = [time.replace(/\//g, '-'), time.replace(/\//g, '-')]
    },
    handleGoToCommis(id, time, name) {
      this.$router.push({ name: 'brokerBody', query: { id, time, name }})
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    init(this.id).then(response => {
      this.data = response.data.result.commission.data
      this.nav.month_total = response.data.result.month_total
      this.name = response.data.result.name
      this.page.total = response.data.result.commission.total
      this.page.pageSize = response.data.result.commission.per_page
    })
  }
}
</script>

<style lang="scss" scoped>
  .brokerage {
    .card {
      /deep/ .el-card__body {
        padding: 10px
      }
      b{
        display: inline-block;
        width: 70px;
        height: 70px;
        margin-right: 10px;
        vertical-align: middle;
      }
      .total{
        background: url('../../assets/img/icon-1.png') center no-repeat;
      }
      h1{
        font-weight: 400;
        margin: 0;
      }
      .total+div{
        display: inline-block;
        vertical-align: middle;
        line-height: 1.4;
      }
    }
  }
</style>
